/*
 * 组件注释
 * @Author: machinist_wq
 * @Date: 2022-05-18 20:08:54
 * @LastEditors: machinist_wq
 * @LastEditTime: 2022-07-07 20:54:20
 * @Description:
 * 人生无常！大肠包小肠......
 */
/**
 * 使用谷歌的puppeteer插件简单的实现一个ssr
 * 利用puppeteer插件的爬虫能力，获取目标页面
 * 相对会慢一下，因为要抓取在渲染
 * 另外可以关注以下两个库：
 * *prerender 实现遍历所有的路由，都写成html文件，或者都缓存上
 * *prerender-spa-plugin 这是一个webpack层面的plugin插件
 * 对react、vue、angular支持比较好
 * 它会获取路由并导出html文件
 * # 正常启动项目 待项目启动以后 使用nodemon执行当前文件即可启动
 */
const express = require("express");
const puppeteer = require("puppeteer");

// /api开头的请求
const axios = require("axios");
const app = express();

// 测试截图效果
async function test() {
  console.log("截图");
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto("https://www.baidu.com/");
  await page.screenshot({ path: "baidu.png" });
  browser.close();
}
// test();

const urlCache = {};
app.get("*", async (req, res) => {
  const url = "http://localhost:9093" + req.url;

  //

  // 加缓存 继续优化可选择缓存算法
  if (urlCache[url]) {
    return res.send(urlCache[url]);
  }

  if (req.url === "/favicon.ico") {
    // 对seo无影响
    return res.send({ code: 0 });
  }

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url, {
    waitUntil: ["networkidle0"],
  });
  const html = await page.content();

  console.log(html);
  urlCache[url] = html;
  res.send(html);
});

app.listen(8081, () => {
  console.log("npm start server");
});
